<template>
  <div>
    <g-layout :isShowLeftSider="false">
      <template #content>
        <div class="content-container">
          <div class="flex flex-wrap">
            <CollapseContainer
              title="基础示例"
              :canExpan="true"
              class="text-center mb-6 qrcode-demo-item"
            >
              <QrCode :value="qrCodeUrl" />
            </CollapseContainer>

            <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 qrcode-demo-item">
              <QrCode :value="qrCodeUrl" tag="img" />
            </CollapseContainer>

            <CollapseContainer title="配置样式示例" class="text-center mb-6 qrcode-demo-item">
              <QrCode
                :value="qrCodeUrl"
                :options="{
                  color: { dark: '#55D187' },
                }"
              />
            </CollapseContainer>

            <CollapseContainer title="本地logo示例" class="text-center mb-6 qrcode-demo-item">
              <QrCode :value="qrCodeUrl" :logo="LogoImg" />
            </CollapseContainer>

            <CollapseContainer title="在线logo示例" class="text-center mb-6 qrcode-demo-item">
              <QrCode
                :value="qrCodeUrl"
                logo="https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png"
                :options="{
                  color: { dark: '#55D187' },
                }"
              />
            </CollapseContainer>

            <CollapseContainer title="logo配置示例" class="text-center mb-6 qrcode-demo-item">
              <QrCode
                :value="qrCodeUrl"
                :logo="{
                  src: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
                  logoSize: 0.2,
                  borderSize: 0.05,
                  borderRadius: 50,
                  bgColor: 'blue',
                }"
              />
            </CollapseContainer>
          </div>
        </div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    name: 'qrcode',
    mixins: [IndexMixin],
  });
</script>

<style lang="less" scoped>
  .content-container {
    padding: 16px;
  }
  .qrcode-demo-item {
    width: 30%;
    margin-right: 1%;
  }
</style>
